<template>
  <div id="WkEmployeeHome">
    <el-scrollbar style="height: 100%">
      <div class="topThreeDiv">
        <el-card>
          <div class="cardTitle">标本上机</div>
          <div class="greyTotal">
            <div class="greyTotalTitle">今日总数 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已上机 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">未上机 <span class="greyTotalNum">133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model="radioSampleMachine" size="small" text-color="#fff" fill="#00b2cd">
              <el-radio-button label="近7天" value="近七天" />
              <el-radio-button label="近1个月" value="近1个月" />
              <el-radio-button label="近3个月" value="近3个月" />
            </el-radio-group>
          </div>
          <div class="progressTitle">
            <div>日期</div>
            <div>已完成</div>
            <div>未完成</div>
          </div>
          <div class="progressBody" v-for="o in 7">
            <div class="dates">02-18</div>
            <div class="elProcessLine">
              <el-progress :text-inside="true" :stroke-width="13" :percentage="70" status="exception" color="#00b2cd" show-text>
                <span>125</span>
              </el-progress>
            </div>
          </div>
        </el-card>

        <el-card class="userInfo">
          <div class="userTop">
            <img src="../../../assets/userCircleImg.png" alt="" class="userCircleIcon" />
            <div class="userDetail">
              <div class="userName">
                <span>谢广坤</span>
                <div class="ageSex"><img src="../../../assets/maleImg.png" alt="" /> <span>43岁</span></div>
              </div>
              <div class="userProfess">检验主任技师</div>
              <div class="userNumber">
                <span>手机号: 13246572165</span>
                <span>工号: 2024001</span>
              </div>
            </div>
          </div>
          <div class="clockIn">
            <div>上班打卡:08:00</div>
            <div>下班打卡:18:00</div>
          </div>
          <div class="shadowCard">
            <div>今日标本:</div>
            <div class="totalNumber">总数/个 <span>133</span></div>
            <div class="alreadyupLoad">已上报/个 <span>133</span></div>
            <div class="noupLoad">未上报/个 <span>8</span></div>
          </div>
          <div class="shadowCard">
            <div>今日危急值:</div>
            <div class="totalNumber">总数/个 <span>133</span></div>
            <div class="alreadyupLoad">已上报/个 <span>133</span></div>
            <div class="noupLoad">未上报/个 <span>8</span></div>
          </div>
        </el-card>

        <el-card>
          <div class="cardTitle">危急值</div>
          <div class="greyTotal">
            <div class="greyTotalTitle">今日总数 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已上机 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">未上机 <span class="greyTotalNum">133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model="radioCriticalValue" size="small" text-color="#fff" fill="#00b2cd">
              <el-radio-button label="近7天" value="sevenDays" />
              <el-radio-button label="近1个月" value="oneMonths" />
              <el-radio-button label="近3个月" value="threeMonths" />
            </el-radio-group>
          </div>
          <div id="dbBarCharts" class="chart"></div>
        </el-card>
      </div>

      <div class="centerThreeDiv">
        <el-card>
          <div class="cardTitle">仪器质控</div>
          <div class="greyTotal">
            <div class="greyTotalTitle">今日总数 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已处理 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">失控 <span class="greyTotalNum">133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model="radioInstruQualControl" size="small" text-color="#fff" fill="#00b2cd">
              <el-radio-button label="近7天" value="sevenDays" />
              <el-radio-button label="近1个月" value="oneMonths" />
              <el-radio-button label="近3个月" value="threeMonths" />
            </el-radio-group>
          </div>
          <div class="processCircle">
            <div class="processBlue">
              <div class="processChart">
                <el-progress type="circle" :percentage="75" color="#00b2cd" :stroke-width="13" :width="120">
                  <span style="color: #00b2cd; font-weight: 700">已处理</span>
                </el-progress>
              </div>
              <div class="processBlueDetail">
                <div v-for="blue in 7" class="vforDateNum">
                  <span></span>
                  <div>02-18: 125个</div>
                </div>
              </div>
            </div>
            <div class="processYellow">
              <div class="processChart">
                <el-progress type="circle" :percentage="75" color="#ffb765" :stroke-width="14" :width="120">
                  <span style="color: #ffb765; font-weight: 700">失控</span>
                </el-progress>
              </div>
              <div class="processYellowDetail">
                <div v-for="yellow in 7" class="vforDateNum">
                  <span></span>
                  <div>02-18: 125个</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>

        <el-card>
          <div class="cardTitle">设备保养</div>
          <div class="greyTotal">
            <div class="greyTotalTitle">今日总数 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已处理 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">失控 <span class="greyTotalNum">133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model="radioEquipMaintenance" size="small" text-color="#fff" fill="#00b2cd">
              <el-radio-button label="近7天" value="sevenDays" />
              <el-radio-button label="近1个月" value="oneMonths" />
              <el-radio-button label="近3个月" value="threeMonths" />
            </el-radio-group>
          </div>
          <div id="dbLineCharts" class="chart"></div>
        </el-card>

        <el-card>
          <div class="cardTitle">日常考勤</div>

          <div class="data-analysis">
            <el-calendar v-model="calendarValue1" ref="calendar">
              <template #header="{ date }">
                <span>{{ date }}</span>
                <div class="blueMark"><span style="width: 10px; height: 10px; background-color: #409eff; border-radius: 50%;display: inline-block;"></span> <span>正常</span></div>
                <div class="redMark"><span style="width: 10px; height: 10px; background-color: red; border-radius: 50%;display: inline-block;"></span> <span>异常</span></div>

                <el-button-group>
                  <el-button size="small" @click="selectDate('prev-month')">上个月</el-button>
                  <el-button size="small" @click="selectDate('today')">今天</el-button>
                  <el-button size="small" @click="selectDate('next-month')">下个月</el-button>
                </el-button-group>
              </template>
              <template #date-cell="{ date, data }">
                <div>
                  <div v-for="(item, key) in activeday" :key="key">
                    <div v-if="data.day == item.dat">
                      <el-badge is-dot class="item" type="primary">
                        <template #default>
                          <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
                        </template>
                      </el-badge>
                    </div>
                  </div>
                  <div v-for="(item, key) in errorday" :key="key">
                    <div v-if="data.day == item.dat">
                      <el-badge is-dot class="item">
                        <template #default>
                          <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
                        </template>
                      </el-badge>
                    </div>
                  </div>
                  <div v-if="!activeday.find((item) => item.dat == data.day) && !errorday.find((item) => item.dat == data.day)">
                    <div class="spandate">{{ data.day.split('-').slice(2).join('-') }}</div>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </el-card>
      </div>

      <div class="bottomTwoDiv">
        <el-card>
          <div class="cardTitle">任务处理</div>
          <div class="greyTotal">
            <div class="greyTotalTitle">今日总数 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已处理 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">未处理 <span class="greyTotalNum">133</span> /个</div>
            <div class="greyTotalTitle">已超时 <span class="greyTotalNum">133</span> /个</div>
          </div>
          <div>
            <el-radio-group v-model="radioTaskProcessing" size="small" text-color="#fff" fill="#00b2cd">
              <el-radio-button label="近7天" value="sevenDays" />
              <el-radio-button label="近1个月" value="oneMonths" />
              <el-radio-button label="近3个月" value="threeMonths" />
            </el-radio-group>
          </div>
          <div id="ecList1" class="chart"></div>
        </el-card>
        <el-card> 32 </el-card>
        <el-card> 33 </el-card>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import * as echarts from 'echarts';
import type { CalendarDateType, CalendarInstance } from 'element-plus';

let radioSampleMachine = ref('近7天'); //标本上机
let radioCriticalValue = ref('近7天'); //危急值
let radioInstruQualControl = ref('近7天'); //仪器质控
let radioEquipMaintenance = ref('近7天'); //设备保养
let radioTaskProcessing = ref('近7天'); //任务处理

// 日历
let calendarValue1 = ref(new Date());
// 正常
let activeday = reactive([
  // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
  { dat: '2024-03-10' },
  { dat: '2024-03-11' },
  { dat: '2024-03-12' }
]);
// 异常
let errorday = reactive([
  // 日历组件选中的日期，小红点，时间格式必须为yyyy-MM-dd，比如3月5号要写成03-05而不是3-5
  { dat: '2024-03-14' },
  { dat: '2024-03-15' },
  { dat: '2024-03-05' }
]);

const calendar = ref<CalendarInstance>();
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};

onMounted(() => {
  const myChart = echarts.init(document.getElementById('dbBarCharts') as HTMLElement);

  const myChart2 = echarts.init(document.getElementById('dbLineCharts') as HTMLElement);

  const myChart3 = echarts.init(document.getElementById('ecList1') as HTMLElement);

  //双柱状图(危急值)
  myChart.setOption({
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已上报', '未上报'],
      right: '10%',
      top: '2%'
    },
    yAxis: {
      type: 'value'
    },
    xAxis: {
      type: 'category',
      data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24']
    },
    series: [
      {
        type: 'bar',
        name: '已上报',
        stack: 'total',
        data: [140, 90, 140, 122, 140, 122, 138]
      },
      {
        type: 'bar',
        name: '未上报',
        stack: 'total',
        data: [30, 20, 30, 26, 16, 18, 26]
      }
    ]
  });

  // 双折线图(设备保养)
  myChart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已保养', '未保养'],
      right: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '未保养',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [28, 6, 10, 0, 2, 18, 28]
      },
      {
        name: '已保养',
        type: 'line',
        stack: 'Total',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [160, 150, 152, 150, 152, 154, 160]
      }
    ]
  });

  // 柱状图——折线(任务处理)
  myChart3.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      x: 30,
      y: 45,
      x2: 5,
      y2: 25,
      borderWidth: 1
    },
    legend: {
      data: ['已处理', '未处理'],
      right: '10%'
    },
    xAxis: [
      {
        type: 'category',
        data: ['02-18', '02-19', '02-20', '02-21', '02-22', '02-23', '02-24'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 180,
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        }
      },
      //折线显示的右边轴
      {
        type: 'value',
        show: false,
        min: 0,
        max: 180,
        interval: 50,
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '已处理',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: [149, 90, 149, 122, 140, 121, 147]
      },
      {
        name: '未处理',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value) {
            return value;
          }
        },
        data: [165, 28, 30, 0, 0, 29, 58]
      }
    ]
  });

  window.addEventListener('resize', function () {
    myChart.resize();
    myChart2.resize();
    myChart3.resize();
  });
});
</script>

<style lang="scss" scoped>
#WkEmployeeHome {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  background-color: #f4f8fb;
  // 横着上面三个卡片
  .topThreeDiv {
    display: flex;
    .el-card {
      flex: 1;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      :deep(.el-card__body) {
        padding: 8px 10px;
        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }
        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;
          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          font-size: 12px;
          margin: 5px;
        }
        .progressBody {
          width: 100%;
          color: #9e9ea0;
          display: flex;
          margin-bottom: 2px;
          .dates {
            margin-right: 10px;
          }
          .elProcessLine {
            width: calc(100% - 50px);
          }
        }
      }
    }
    .userInfo {
      background: linear-gradient(to bottom, #20c2db, #01a4cd);
      .userTop {
        display: flex;
        .userCircleIcon {
          height: 80%;
        }
        .userDetail {
          margin-left: 10px;
          .userName {
            display: flex;
            span {
              color: #fff;
              font-size: 15px;
              font-weight: 700;
            }
            .ageSex {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 15px;
              img {
                height: 60%;
              }
              span {
                color: #fff;
                font-size: 14px;
                font-weight: 700;
                width: 50px;
                margin-left: 5px;
              }
            }
          }
          .userProfess {
            color: #fff;
            font-size: 14px;
            margin: 7px 0;
          }
          .userNumber {
            span {
              color: #fff;
              font-size: 14px;
              margin-right: 10px;
            }
          }
        }
      }
      .clockIn {
        display: flex;
        div {
          border: 1px solid #fff;
          padding: 4px 55px;
          font-size: 14px;
          font-weight: 700;
          color: #fff;
          margin: 5px;
          border-radius: 5px;
        }
      }
      .shadowCard {
        color: #fff;
        background-color: #3fc0dd;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding: 4px;
        margin-bottom: 6px;
        &:last-child {
          margin-bottom: 0;
        }
        div {
          width: 25%;
          text-align: center;
          vertical-align: middle;
          font-size: 13px;
        }
        .totalNumber,
        .alreadyupLoad,
        .noupLoad {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          span {
            font-size: 16px;
            font-weight: 700;
            margin-top: 10px;
          }
        }
      }
    }
  }
  // 中间横着三个卡片
  .centerThreeDiv {
    display: flex;
    margin-top: 8px;
    .el-card {
      flex: 1;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      :deep(.el-card__body) {
        padding: 8px 10px;
        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }
        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;
          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          margin: 5px;
        }
        .processCircle {
          display: flex;
          width: 100%;
          padding-top: 6px;
          .processBlue,
          .processYellow {
            width: 50%;
            display: flex;
            .processBlueDetail {
              margin-left: 5px;
              .vforDateNum {
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  border-radius: 50%;
                  background-color: #00b2cd;
                  margin-right: 5px;
                }
                div {
                  color: #9e9ea0;
                  font-size: 13px;
                }
              }
            }
            .processYellowDetail {
              margin-left: 5px;
              .vforDateNum {
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                  width: 8px;
                  height: 8px;
                  display: inline-block;
                  border-radius: 50%;
                  background-color: #ffb765;
                  margin-right: 5px;
                }
                div {
                  color: #9e9ea0;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }
  // 底部横着两个卡片
  .bottomTwoDiv {
    display: flex;
    margin-top: 8px;
    .el-card {
      flex: 1;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
      :deep(.el-card__body) {
        padding: 8px 10px;
        .cardTitle {
          font-size: 15px;
          font-weight: 700;
          margin: 0 0 5px 0;
        }
        .greyTotal {
          margin: 0 10px 5px 0;
          display: flex;
          align-items: center;
          .greyTotalTitle {
            background-color: #f8f9fb;
            color: #9e9ea0;
            font-size: 14px;
            padding: 5px 18px;
            margin-right: 10px;
            border-radius: 5px;

            .greyTotalNum {
              color: #000;
              font-size: 16px;
              font-weight: 700;
            }
          }
        }
        .progressTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #9e9ea0;
          margin: 5px;
        }
      }
    }
  }
  // echarts图表
  .chart {
    width: 450px;
    height: 120px;
  }
  #dbBarCharts,
  #dbLineCharts {
    width: 450px;
    height: 140px;
  }
  /*日历样式修改*/
  .data-analysis {
    width: 100%;
    height: 200px;
    .el-calendar {
      width: 100%;
      height: 100%;
      :deep(.el-calendar__header) {
        padding: 5px;
      }
      :deep(.el-calendar__body) {
        padding: 5px;
        height: calc(100% - 45px);
        .el-calendar-table thead th {
          padding: 0;
        }
        .el-calendar-table__row {
          .el-calendar-day {
            padding: 5px;
            height: 20px;
            text-align: center;
            position: relative;
            .el-badge {
              position: absolute;
              right: 24px;
              top: 5px;
              .el-badge__content.is-fixed.is-dot {
                right: -5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
